<template>
  <cloudPage :isLoading="isLoading">
    <cloudHeader slot="gHeader" background="#015FFF">
      <view class="grace-header-body">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons icon-arrow-left"
          style="color: #fff"
          @tap.stop="handleNavBack"
        ></view>
        <!-- 中间内容 -->
        <view
          class="grace-header-content-noflex grace-text-center"
          style="color: #fff; font-size: 36rpx"
        >
          {{ $t("mf.home.home_title") }}
        </view>
        <!-- 右侧按钮 -->
        <view class="icons grace-icons"></view>
      </view>
    </cloudHeader>
    <view class="container" v-if="!isLoading">
      <view class="detail_top_bg"></view>
      <view class="center_content">
        <commodity
          :title="detail.name"
          :storage="detail.power"
          :amount="detail.price"
          :symbol="detail.pay_symbol"
          :period="detail.cycle_day"
          :number="detail.stock"
        />
        <view style="height: 30rpx"></view>
        <view class="explian">
          <view class="explian_title">{{ $t("mf.good.introduction") }}</view>
          <view class="blue_line"></view>
          <view class="explian_content">
            <p>
              {{ $t("mf.good.introduction2") }}
            </p>
            <p>
              {{ $t("mf.good.introduction2") }}
            </p>
            <p>
              {{ $t("mf.good.introduction3") }}
            </p>
          </view>
        </view>
      </view>
    </view>
    <view class="buy_box flex" v-if="!isLoading">
      <view class="flex1 good_price"
        >{{ detail.price
        }}<text style="font-size: 26rpx">{{ detail.pay_symbol }}</text></view
      >
      <view
        class="now_buy"
        @tap.stop="
          handleNavTo({ url: '/pages/mf/shop/orderPay?id=' + detail.id })
        "
        >{{ $t("mf.good.now_buy") }}</view
      >
    </view>
  </cloudPage>
</template>

<script>
import { mapActions } from "vuex";
import commodity from "./compontent/commodity";
export default {
  components: {
    commodity,
  },
  data() {
    return {
      isLoading: false,
      detail: null,
    };
  },
  methods: {
    ...mapActions("mf/shop", ["getGoodInfo"]),
  },
  async onLoad(option) {
    this.isLoading = true;
    this.detail = await this.getGoodInfo({ id: option.id });
    this.isLoading = false;
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  padding-top: 40rpx;
  box-sizing: border-box;
  padding-bottom: 120rpx;
}
.detail_top_bg {
  width: 200%;
  height: 492rpx;
  background: #015FFF;
  position: absolute;
  top: 0;
  left: -50%;
  border-radius: 0 0 50% 50%;
}
.center_content {
  width: 710rpx;
  padding: 0 20rpx 150rpx;
  position: absolute;
}
.explian {
  width: 710rpx;
  height: 577rpx;
  background: #FFFFFF;
  box-shadow: 0px 8rpx 30rpx 0px #ECECEC;
  border-radius: 20rpx;
  padding: 30rpx;
  box-sizing: border-box;
}
.explian_title {
  height: 50rpx;
  font-size: 36rpx;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #2B2B2B;
  line-height: 50rpx;
  text-align: center;
  z-index: 20;
}
.blue_line {
  width: 98rpx;
  height: 18rpx;
  background: #015FFF;
  box-shadow: 0px 4rpx 14rpx 0px #9BC0FF;
  border-radius: 9rpx;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  opacity: 1;
  margin-bottom: 40rpx;
}
.explian_content {
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 500;
  color: #555555;
  line-height: 53rpx;
}
.buy_box {
  position: fixed;
  width: 710rpx;
  height: 98rpx;
  bottom: 40rpx;
  background: #FFFFFF;
  box-shadow: 0px 8px 30px 0px #ECECEC;
  border-radius: 49rpx;
  left: 50%;
  transform: translateX(-50%);
  line-height: 98rpx;
  text-align: center;
  color: #FF6565;
}
.good_price {
  font-size: 46rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #FF6565;
}
.now_buy {
  width: 355rpx;
  height: 98rpx;
  background: linear-gradient(90deg, #4F90FF 0%, #015FFF 100%);
  border-radius: 49rpx;
  font-size: 32rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
}
</style>